<template>
  <el-drawer title="课程详情" :visible.sync="visible" :with-header="false" size="650px">
    <div class="right-container">
      <div class="container-header">
        <div style="font-size: 14px">统计详情</div>
        <div @click="handleClose">
          <i class="el-icon-close" style="font-size: 18px"></i>
        </div>
      </div>
      <div class="container-content background-color-grey padding-10">
        <div class="bg-white border-radius">
          <div class="flex justify-between align-center margin-bottom-sm padding-lg border-bottom card-heard-title ">
            <div>
              <i class="el-icon-collection-tag" style="font-size: 18px"></i>
              基本信息
            </div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">课程名称：{{manageItem.manageName}}</div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">考试名称：{{manageItem.examName}}</div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">考试时间：{{manageItem.createTime}}</div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">考试总分：{{examMain.totalScore}}</div>
            <div class="flex-1">合格分数：{{examMain.passScore}}</div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">考试得分：{{manageItem.score}}</div>
            <div class="flex-1">考试状态：
              <span v-if="manageItem.status === 0">未通过</span>
              <span v-else>已通过</span>
            </div>
          </div>
        </div>

        <div  class="bg-white border-radius margin-top-md">
          <div class="flex justify-between align-center margin-bottom-sm padding-lg border-bottom card-heard-title">
            <div>
              <i class="el-icon-collection-tag" style="font-size: 18px"></i>
              得分明细
            </div>
          </div>
          <div class="padding-lr-lg padding-bottom-lg">
            <el-table ref="tableRef" :header-cell-style="tableHeaderStyle" :data="dataList"  border
              v-loading="dataListLoading"  style="width: 100%;">
              <!-- //序号 取index+1 -->
              <el-table-column prop="id" label="序号" width="60" align="center">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>

              <el-table-column prop="name" header-align="left" align="left" label="题目" >
              </el-table-column>

              
              <el-table-column prop="myselfAns" header-align="left" align="left" label="结果" width="100">
                <template slot-scope="scope">
                  <span v-if="scope.row.myselfAns&&scope.row.myselfAns.indexOf(scope.row.ans)!=-1" size="small" class="text-green">正确</span>
                  <span v-else class="text-red">错误</span>
                </template>
              </el-table-column>

            </el-table>

          </div>
        </div>
          

        

        
      </div>
    </div>

  </el-drawer>
</template>

<script>

export default {
  data() {
    return {
      manageItem: {
        name: '',
        studyName: ''
      },
      examMain: {
      },
      dataListLoading: false,
      tableHeaderStyle: { background: '#f5f7fa !important', height: '20px !important', padding: '4px !important' },
      direction: 'rtl',
      visible: false,
      dataList:[]
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {
    repairTableByRef(refName) {
      this.$refs[refName].doLayout()
    },
    handleClose() {
      this.visible = false; // 关闭外层 Drawer 时不关闭内层 Drawer
    },
    //获取学习进度数据
    getExamItemInfo(id) {
      this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl(`/class/examUser/info/${id}`),
          method: 'get',
          params: this.$http.adornParams({"userId":this.manageItem.userId})
        }).then(({data}) => {
          if (data && data.code === 0) {
            
            if(data.classExam&&data.classExam.examItemList){
              this.examMain = data.classExam
              this.dataList = data.classExam.examItemList
            }
            
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
          this.repairTableByRef('tableRef')

        })
    },
    
    init(manageItem) {
      console.log(manageItem);
      this.manageItem = manageItem;
      this.visible = true;
      this.getExamItemInfo(this.manageItem.id)
    },
  }
}
</script>
<style>
.right-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container-header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px
}

.container-content {
  flex: 1;
}


.flex-container {
  display: flex;
  justify-content: space-between;
  /* 根据需要调整 */
}

.flex-item {
  flex: 1;
  /* 可以根据需要调整比例 */
  margin: 0 10px;
  /* 添加一些间距 */
}

.left-panel,
.right-panel {
  /* 在这里添加任何特定的样式，比如背景色、边框等 */
}

.el-tabs--border-card>.el-tabs__content {
  padding: 10px 0;
}
</style>
